<template>
  <div class="volume-control">
    <!-- 背景音乐区域 -->
    <div class="volume-item">
      <span>背景音乐</span>
      <!-- 播放/暂停按钮 -->
      <button @click="togglePlay('bgm')" class="play-btn">
        <i class="fas" :class="bgmPlaying ? 'fa-pause' : 'fa-play'"></i>
      </button>
      <!-- 音量滑块：范围 0~100，双向绑定 bgmVolume -->
      <input
        type="range"
        min="0"
        max="100"
        v-model="bgmVolume"
        @input="updateVolume('bgm')"
      />
      <span>{{ bgmVolume }}%</span>
    </div>

    <!-- 提示声音区域 -->
    <div class="volume-item">
      <span>提示声音</span>
      <!-- 播放/暂停按钮 -->
      <button @click="togglePlay('tip')" class="play-btn">
        <i class="fas" :class="tipPlaying ? 'fa-pause' : 'fa-play'"></i>
      </button>
      <!-- 音量滑块：范围 0~100，双向绑定 tipVolume -->
      <input
        type="range"
        min="0"
        max="100"
        v-model="tipVolume"
        @input="updateVolume('tip')"
      />
      <span>{{ tipVolume }}%</span>
    </div>

    <!-- 音频标签：通过 ref 引用，移除自动播放 -->
    <audio
      ref="bgmAudio"
      src="https://m701.music.126.net/20250925172738/8cdb4c2985bb2e023aef111065708e4f/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/60407073831/026e/f74c/4ea6/c83564be25b32f6df21381bb7630f42c.mp3"
      loop
    ></audio>
    <audio
      ref="tipAudio"
      src="https://m701.music.126.net/20250925172755/06fd683a7288929ba245861243c184a8/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/62196991403/ba7c/ef3c/fcee/0b43a510d6bff2870f4d24590e343ac0.mp3"
    ></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bgmVolume: 36, // 初始背景音乐音量（对应 36%）
      tipVolume: 70, // 初始提示声音音量（对应 70%）
      bgmPlaying: false, // 背景音乐播放状态
      tipPlaying: false // 提示声音播放状态
    }
  },
  mounted() {
    // 页面加载后，仅初始化音频音量，不自动播放
    this.updateVolume('bgm')
    this.updateVolume('tip')
  },
  methods: {
    updateVolume(type) {
      const audioRef =
        type === 'bgm' ? this.$refs.bgmAudio : this.$refs.tipAudio
      const volume =
        type === 'bgm' ? this.bgmVolume / 100 : this.tipVolume / 100
      if (audioRef) {
        audioRef.volume = volume // 设置音频音量（0~1）
      }
    },
    // 切换播放/暂停状态
    togglePlay(type) {
      const audioRef =
        type === 'bgm' ? this.$refs.bgmAudio : this.$refs.tipAudio
      const playingProp = type === 'bgm' ? 'bgmPlaying' : 'tipPlaying'

      if (audioRef) {
        if (this[playingProp]) {
          audioRef.pause()
        } else {
          audioRef.play().catch((error) => {
            console.error(
              `播放${type === 'bgm' ? '背景音乐' : '提示声音'}失败:`,
              error
            )
          })
        }
        this[playingProp] = !this[playingProp]
      }
    }
  }
}
</script>

<style scoped>
.volume-control {
  padding: 20px;
  background: #333;
  color: #fff;
  border-radius: 8px;
  width: 350px;
}
.volume-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.volume-item span:first-child {
  width: 80px;
}
input[type='range'] {
  width: 200px;
  flex-grow: 1;
}
.play-btn {
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}
.play-btn:hover {
  background: #45a049;
}
</style>
